﻿
<template>
  <div class="Adventure_user_index" ref ="el"> 
       <div class="Adventure_user_index_header">
         <img src="../../static/img/goback_header_left_act.png" class="goback_img"/>
         <div class="header_name">冒险卡</div>
         <input type="text" name="name" value="" class="input_search"/>
         <div class="new_adventure">
           写冒险卡
         </div>
       </div>
       <scroll class="scroll" :card_mess="header_scroll" @get_scroll_data="get_data_scroll" v-if="show_header_scroll" :user_list="data_user_list"></scroll>
    <div class="bottom_wrapper">
      <!-- user_img s -->
      <div class="bottom_box" v-for="bottom_box_list in show_list_list" v-on:click="goto_user_index(bottom_box_list.id)">
        <img src="../../static/img/ad_gth.jpg" class="gantan">
        <img v-bind:src="bottom_box_list.image|judge_and_add_Base" class="user_img">
        <p class="user_id">
          ID:{{bottom_box_list.ident}}
        </p>
        <div class="bottom_div">
          <img src="../../static/img/ad_gift.jpg" class="bottom_div_g">
          <img src="../../static/img/ad_music.jpg" class="play_voice">
        </div>
      </div>
     
      <!-- user_img e -->
      <!-- new scroll s -->
      <div class="bottom_box_b" v-for="show_list_list in show_list_user" >
           <div class="bottom_box_header">
             <img v-bind:src="show_list_list.image" alt="Alternate Text"  class="new_sc_box_img">
             <ul class="new_box_header_wrapper">
               <li class="new_box_header_id">
                 ID:{{show_list_list.ident}}
               </li>
               <li class="new_box_header_name">
                 {{show_list_list.penName|if_null}}
               </li>
             </ul>
             <img src="../../static/img/ad_gift.jpg" class="new_scroll_gift">
           </div>
        <div class="warpper_scroll_b">
          <scroll class="scroll" :user_card_mess="show_list_list.adventurecards" :user_list="data_user_list" :card_mess="list"></scroll>
        </div>   
      </div>
      <!-- new scroll e -->
    </div>
    <!-- FooterMenu s-->
    <FooterMenu></FooterMenu>
    <!-- FooterMenue -->
  </div>   
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import style from "../../static/css/mint-ui/style.css";
  import axios from 'axios';
  import Vue from "vue";
  import "../filter/filter.js";
  import ad_user_index from "../../static/css/Adventure/Adv_index.css";
  import limit_scroll from "../../static/js/limit_scroll.js";
  import scroll from "./nav_gift_scrol.vue"
  import common from "../common/common.js"
  import FooterMenu from "../index/FooterMenu.vue";
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  Vue.prototype.$http = axios
  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        bot_box_f: false,
        header_scroll: [],
        show_header_scroll: false,
        item: "",
        pageNo: 1,
        pageSize: 10,
        show_list_user:"",
        show_list_list: "",
        data_user_list: true,
        list:[]

      }
    },
    props: ['show'],
    beforeCreate: function () {

    },
    methods: {
      goto_user_index: function (id) {
        sessionStorage.setItem("ad_id", id);
        sessionStorage.setItem("ad_visit","false")
        this.$store.dispatch("thom_redirect",
          {
            name: "/user_index", router: this.$router
          });
      },
      get_data_scroll: function (item) {
        let user_id = common.get_user_id();//获取用户id
        if (!!item) {
          this.item = item
        }
       Indicator.open();
       let base_url = sessionStorage.getItem("base_url");
       console.log("base_urL________________________")
       console.log(base_url)
        this.$http.post('http://wx.yizhiweimeng.com/api/user/adventurecard/GettingCardInformation',
          qs.stringify(
            {
              'term': this.item,
              'uid': user_id,
              'pageNo': this.pageNo,
              'pageSize': this.pageSize
            })
          )
          .catch((thrown) => {
            Indicator.close();
            Toast({
              message: '网络出错',
              position: 'bottom',
              duration: 2000,
            });
          }).then((e) => {
            //记录id
            Indicator.close();

            let data = e.data;
            let data_len = e.data.length;

            if (this.item === "最新" || this.item === "热门") {
              this.show_list_user = [];
              this.show_list_list = e.data;
              this.data_user_list = true;
            } else {
              this.show_list_list = [];
              //循环 添加 act

              this.data_user_list = false;
              for (let x = 0; x < data_len; x++) {
                for (let y = 0; y < data[x].adventurecards.length; y++) {
                  if (y == 1) {
                    data[x].adventurecards[y].act = true;
                    continue;
                  }
                  data[x].adventurecards[y].act = false;
                }
              }

              this.show_list_user = data;

            }
          })
      },
    },
    mounted: function () {
      ///api/user / adventurecard / getRiskCardScreenings
      Indicator.open();
      this.$http.get('/yizhiweimen/api/user/adventurecard/getRiskCardScreenings',
        qs.stringify(
          {

          })
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          //记录id
          Indicator.close();
          let data = e.data;

          for (let x = 0; x < data.length; x++) {
            if (x == 1) {
              data[x].act = true;
              continue;
            }
            data[x].act = false;
          }
          this.header_scroll = data;
          this.show_header_scroll = true;
        })
    },
    components: {
      scroll,
      FooterMenu
    }
  }
</script>
<style>
  #app{
    height:auto;
    background-color:#eee;
  }
  .bottom_box_b{
    margin-top:3vw;
  }
  html,body{
    background-color:#eee;
  }
  /*bottom_box_header s*/
  .new_scroll_gift {
    height: 4.9vw;
    width: 4.8vw;
    margin-top: 7vw;
    margin-left: 8.6vw;
  } 
  .warpper_scroll_b {
    background-color: #fff;
    border-radius: 0 0 2vw 2vw;
  } 
  .new_box_header_name {
    margin-top: 2vw;
    text-align: left;
    font-weight:500;
  } 
  .new_box_header_id {
    margin-top: 2.4vw;
    font-weight:500;
  }
  .new_box_header_wrapper {
    height: 100%;
    line-height: 1;
    color: #9f5c2f;
    font-size: 4vw;
    font-weight: 600;
  } 
  .new_sc_box_img {
    height: 14vw;
    width: 14vw;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 5.3vw;
    margin-right: 3vw;
    margin-top:1vw;
  }
  .bottom_box_header {
    display: flex;
    width: 95vw;
    height: 16vw;
    line-height: 16vw;
    background-color: #fff;
    border-bottom: 2px solid #eeeeee;
    border-radius:2vw 2vw 0 0 ;
  }
  /*bottom_box_header e*/
  .play_voice {
    width: 6vw;
    height: 4vw;
    margin-left: 6vw;
    margin-top: 0.5vw;
  } 
  .bottom_div_g {
    width: 4.9vw;
  } 
  .bottom_div {
    width: 17vw;
    height: 5vw;
    margin: 2.6vw auto 0;
    display: flex;
  } 
  .gantan {
    position: absolute;
    top: 0.8vw;
    right: 1.7vw;
    width: 5.2vw;
    height: 5.2vw;
  } 
  .bottom_wrapper {
    /*box-shadow: 0px 2px 8px 2px #c5c5c5;*/
    border-radius:2vw;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color:#eee;
    /*padding-right:2vw;
    padding-left:2vw;*/
    width:94vw;
    margin:0 auto;
  }
  .user_id {
    font-size:3vw;
    text-align: center;
    color: #9f5c2f;
  } 
  .user_img {
    height: 18.4vw;
    width: 18.4vw;
    display: block;
    border-radius: 50%;
    margin: 3.4vw auto 2.5vw;
  } 
  .Adventure_user_index {
    background-color: #eee;
  }
  .bottom_box {
    position:relative;
    box-shadow: 2px 2px 6px 2px #dcd8d8;
    margin-top: 3.2vw;
    width: 29vw;
    height: 38.4vw;
    background-color: #fff;
    border-radius: 1vw;
  } 
  .scroll {
    margin: 0 auto;
  } 
  .Adventure_user_index_header {
    display: flex;
  } 
  .Adventure_user_index {
    width: 100%;
    height:100%;
  } 
  .Adventure_user_index_header {
    height: 12vw;
    line-height: 12vw;
  }
</style>
